import React from 'react'
import axios from '../utils/request'
import { connect } from 'react-redux'
import { useNavigate } from "react-router-dom";

import './Login.scss'
import logo from '../logo.svg'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, message } from 'antd';
import { useTitle } from '../utils/Hooks';

export default function Login(props) {
    console.log(props);
    useTitle('登录')

    const navigate = useNavigate()

    const dl = async (values) => {
        // 登陆成功返回的数据
        let { data, meta } = await axios.post('login', values)
        // console.log(data, meta);

        // return false

        if (meta.status === 200) {
            // 登陆成功，把token保存本地存储
            let { token } = data
            // 存储到localStorage中
            localStorage.setItem('token', token)
            message.success(meta.msg)
            // props.history.push('/layout')
            navigate('/layout/home')
        } else {
            // 登陆失败
            message.error(meta.msg)
        }
    }
    return (
        <div className='login-box'>
            <div className='login-form1'>
                <header className='head-logo'>
                    <img src={logo} alt="" />
                </header>
                {/* 表单登录功能 */}
                <div className='login'>
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{ remember: true }}
                        onFinish={dl}
                    >
                        <Form.Item
                            name="username"
                            rules={[{ required: true, message: '请输入用户名！！' }]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[{ required: true, message: '请输入密码！！' }]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button loading={props.isLoading} type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>

                </div>
            </div>

        </div>
    )
}

// redux的操作
connect((state) => {
    return {
        ...state
    }
})(Login)
